<template>
  <div class="add-or-update">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" v-loading="loading">
      <!--<span >-->
        <!--<el-select v-model="dataForm.buildType" clearable placeholder="请选择" >-->
        <!--<el-option-->
          <!--v-for="item in options"-->
          <!--:key="item.buildType"-->
          <!--:label="item.label"-->
          <!--:value="item.buildType">-->
        <!--</el-option>-->
      <!--</el-select>-->
      <!--</span>-->
      <el-form-item label="报修类型">
        <el-select v-model="dataForm.repaireName" placeholder="请选择" prop="repaireName">
          <el-option label="教学楼报修" value="教学楼报修"></el-option>
          <el-option label="公寓楼报修" value="公寓楼报修"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报修楼类型">
        <el-select v-model="dataForm.buildingId" @change="change1" placeholder="请选择" prop="buildingId">
          <!--<el-option label="教学楼" value="1"></el-option>-->
          <!--<el-option label="公寓楼" value="2"></el-option>-->
          <!--<el-option :value="build.id" v-for="build in btables">{{build.name}}</el-option>-->
          <el-option
            v-for="item in btables"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报修地点">
        <el-select v-model="dataForm.buildingDetailId" placeholder="请选择" prop="buildingDetailId" >
          <!--<el-option :value="buildDetail.id" v-for="buildDetail in bdtables">{{buildDetail.buildName}}</el-option>-->
          <el-option
            v-for="item in bdtables"
            :key="item.id"
            :label="item.buildName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报修物品">
        <el-select v-model="dataForm.goodsId" placeholder="请选择" prop="goodsId">
          <!--<el-option :value="good.id" v-for="good in gtables">{{good.name}}</el-option>-->
          <el-option
            v-for="item in gtables"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="房间号" prop="roomNum">
        <el-input placeholder="请输入名称" v-model="dataForm.roomNum">
        </el-input>
      </el-form-item>
      <el-form-item label="备注" prop="repaireDes">
        <el-input placeholder="请输入" v-model="dataForm.repaireDes">
        </el-input>
      </el-form-item>
      <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible" size="tiny">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <el-form-item>
        <el-button type="primary" @click="dataFormSubmit()" >提交</el-button>
        <el-button @click="resetForm('dataForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
   // name: 'repaire-goods-add-or-update',
  name: 'LoginName',
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      loading: false,
      isShow: false,
      dataForm: {
        repaireName: '',
        buildingId: '',
        buildingDetailId: '',
        goodsId: '',
        roomNum: '',
        repaireDes: '',
        imgUrl: ''
      },
      btables: [],
      bdtables: [],
      gtables: [],
      dataRule: {
        roomNum: [
          {required: true, message: '房间号不能为空', trigger: 'blur'}
        ]
      },
      url: {
        queryBuilding: '/baoxiu/build/findAll',
        queryBUildingDetailByType: '/baoxiu/buildDetail/findAllByType',
        queryGoodsByType: '/baoxiu/goods/findAllByType'
      }
    }
  },
  created () {
    console.log('12111')
    this.queryBuildingFormSubmit()
  },
  methods: {
    queryBuildingFormSubmit: function () {
      this.loading = true
      this.$http
        .get(this.$http.adornUrl(this.url.queryBuilding))
        .then(({data}) => {
          this.loading = false
          this.btables = data
          console.log('btables', this.btables)
        })
    },
    change1 (buildType) {
      this.loading = true
      this.$http
        .get(this.$http.adornUrl(this.url.queryBUildingDetailByType), {
          params: {buildType: buildType}
        })
        .then(({data}) => {
          this.loading = false
          this.bdtables = data
          console.log('bdtables', this.bdtables)
        })
      this.$http
        .get(this.$http.adornUrl(this.url.queryGoodsByType), {
          params: {buildType: buildType}
        })
        .then(({data}) => {
          this.loading = false
          this.gtables = data
          console.log('gtables', this.gtables)
        })
      console.log('buildType', buildType)
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 根据是新增还是修改对表单中的字段进行处理
    init (id) {
      this.dataForm.id = id || 0
      console.log(this.dataForm.id)
      if (this.dataForm.id) {
        this.loading = true
        // 修改
        this.$http({
          url: this.$http.adornUrl(`/sysRole/query/detail`),
          method: 'get',
          params: this.$http.adornParams({id: id})
        }).then(({data}) => {
          this.loading = false
          this.dataForm.id = data.id
          this.dataForm.name = data.name
          this.dataForm.enname = data.enname
          this.dataForm.remarks = data.remarks
        })
      } else {
        // 新增时清空表单
        this.resetForm('dataForm')
      }
    },
    // 提交表单
    dataFormSubmit () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.loading = true
          this.$http({
            url: this.$http.adornUrl('/baoxiu/repaire/add'),
            method: 'post',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
            },
            data: this.$http.adornData(
              {
                repaireName: this.dataForm.repaireName,
                buildingDetailId: this.dataForm.buildingDetailId,
                roomNum: this.dataForm.roomNum,
                goodsId: this.dataForm.goodsId,
                repaireDes: this.dataForm.repaireDes,
                buildingId: this.dataForm.buildingId
              },
              false,
              'form'
            )
          })
            .then(() => {
              this.loading = false
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500  // 持续时间

              })
              this.$emit('changestatus')
              this.$router.push({name: 'repaire-repaireOrder'})
            }).finally(_ => {
              this.resetForm('dataForm')
            })
        }
      })
    },
    // 表单重置
    // closeDialog () {
    //   this.$emit('changestatus')
    // },
    resetForm (formName) {
      this.dataForm = {}
      this.$nextTick(() => {
        this.$refs[formName].resetFields()
      })
    }
  }
}
</script>
